<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://assets.pyecharts.org/assets/echarts.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function load_stocks(){
            $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/stocks",
                    dataType: 'json',
                    success: function (result) {
                        stock=result[0]
                        innerHtml=''
                        $.each(result,function(i,item){
<!--                            console.log(item.name+""+item.code)-->
                            tmpOption="<option value='"+item.code+"&"+item.name+"'>"+item.name+"</option>"

                            innerHtml+=tmpOption
                        })
                        innerHtml+=""
<!--                    console.log(innerHtml)-->

                        $("#stock-list").append(innerHtml)

                        change_stock(stock.name,stock.code,"","");
                    }
            });
        }

       //
       function change_stock(name,code,startDate,endDate){
            var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/stock?name="+name+"&code="+code+"&start_date="+startDate+"&end_date="+endDate,
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result);
                }
            });
       }

       function search(){
            var value = $("#stock-list").children('option:selected').val()
            var codes=value.split("&")
            change_stock(codes[1], codes[0],$("#start_date").val(),$("#end_date").val())
       }

    </script>
</head>
<body>
<div id="choose-stock">
    <!--    <input onclick="load_stocks()" type="button" value="获取股票列表">-->
    <div style="text-align:center">
        股票名称: <select id="stock-list"></select>
        开始时间: <input type="text" id="start_date">
        结束时间:<input type="text" id="end_date">
        <input type="button" value="搜索" onclick="search()">
    </div>
</div>
<div id="bar" style="height:600px;"></div>
<script>
        $(
            function () {
                load_stocks();
                $("#stock-list").change(function(){
                    var value = $(this).children('option:selected').val()
                    var codes=value.split("&")
                    change_stock(codes[1], codes[0],$("#start_date").val(),$("#end_date").val())
                })
            }
        )
</script>
</body>
</html>